<html>  
 <head>  
  <script type="application/javascript">
  
    function drawRectangles() {  
		var canvas = document.getElementById("colouredRectangles");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");  
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
					ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
						+ Math.floor(255 - 42.5 * j) + ',0)';
					ctx.fillRect(j * 25, i * 25, 25, 25);
				}
			}
		}  
    }

	function drawCircles() {  
		var canvas = document.getElementById("colouredCircles");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");  
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
					ctx.strokeStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
						+ Math.floor(255 - 42.5 * j) + ',0)';
					ctx.beginPath();
					ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
					ctx.stroke();
				}
			}
		}  
    }

	function drawRectangles2() {  
		var canvas = document.getElementById("colouredRectangles2");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");  
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
					ctx.strokeStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
						+ Math.floor(255 - 42.5 * j) + ',0)';
					ctx.strokeRect(j * 25, i * 25, 25, 25);
				}
			}
		}  
    }

	function drawCircles2() {  
		var canvas = document.getElementById("colouredCircles2");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");  
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
					ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
						+ Math.floor(255 - 42.5 * j) + ',0)';
					ctx.beginPath();
					ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
					ctx.fill();
				}
			}
		}  
    }

	function globalAlpha() {  
		var canvas = document.getElementById("globalAlpha");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");  
			ctx.fillStyle = '#FD0';
			ctx.fillRect(0,0,75,75);
			ctx.fillStyle = '#6C0';
			ctx.fillRect(75,0,75,75);
			ctx.fillStyle = '#09F';
			ctx.fillRect(0,75,75,75);
			ctx.fillStyle = '#F30';
			ctx.fillRect(75,75,75,75);
			ctx.fillStyle = '#FFF';
			ctx.globalAlpha = 0.2;
			
			for (var i = 0; i < 7; i++) {
				ctx.beginPath();
				ctx.arc(75, 75, 10 + 10*i, 0, Math.PI * 2, true);
				ctx.fill();
			}
		}  
    }
	
	function drawRectanglesWithOpacity() {
		var canvas = document.getElementById("rectanglesWithOpacity");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = 'rgb(255, 221, 0)';
			ctx.fillRect(0, 0, 150, 37.5);
			ctx.fillStyle = 'rgb(102, 204, 0)';
			ctx.fillRect(0, 37.5, 150, 37.5);
			ctx.fillStyle = 'rgb(0, 153, 255)';
			ctx.fillRect(0, 75, 150, 37.5);
			ctx.fillStyle = 'rgb(255, 51, 0)';
			ctx.fillRect(0, 112.5, 150, 37.5);
			
			for (var i = 0; i < 10; i++) {
				ctx.fillStyle = 'rgba(255, 255, 255,' + (i + 1)/10 + ')';
				for (var j = 0; j < 10; j++) {
					ctx.fillRect(5 + i * 14, 5 + j*37.5, 14, 27.5);
				}
			}
		}	
	}
	
	function drawLines() {
		var canvas = document.getElementById("lines");  
		if (canvas.getContext) {  
			var ctx = canvas.getContext("2d");
			var lineCap = ['butt', 'round', 'square'];
			for (var i = 0; i < 10; i++) {
				ctx.lineWidth = i + 1
				ctx.lineCap = lineCap[i % 3];
				ctx.beginPath();
				ctx.moveTo(5 + i * 14, 5);
				ctx.lineTo(5 + i * 14, 140);
				ctx.stroke();
			}
		}
	}
  </script>  
 </head>  
 <body onload="drawRectangles(); drawCircles(); drawRectangles2(); drawCircles2(); globalAlpha(); drawRectanglesWithOpacity(); drawLines();">
	<canvas id="colouredRectangles" width="150" height="150"></canvas>  
	<canvas id="colouredCircles" width="150" height="150"></canvas>
	<canvas id="colouredRectangles2" width="150" height="150"></canvas>
	<canvas id="colouredCircles2" width="150" height="150"></canvas>
	<canvas id="globalAlpha" width="150" height="150"></canvas>
	<canvas id="rectanglesWithOpacity" width="150" height="150"></canvas>
	<canvas id="lines" width="150" height="150"></canvas>
 </body>  
</html>